<template>
    <div class="page-container">
        <!-- <el-container class="page-container"> -->
        <Header :name="searchName" @search="handleSearch"/>
        <el-main class="page-main">
            <!-- 轮播图 -->
            <el-carousel height="168px" class="banner">
                <el-carousel-item v-for="item in bannerList" :key="item">
                    <el-image class="banner-img" :src="item.cover" fit="cover" />
                </el-carousel-item>
            </el-carousel>
            <el-row style="width: 100%;margin: 0 auto;" justify="space-between">
                <el-col :xs="24" :sm="5">
                    <el-card shadow="never" class="left-col-card">
                        <template #header>
                            <div class="card-header">
                                <span>纪念分类</span>
                            </div>
                        </template>
                        <div class="category-section">
                            <div class="category-group">
                                <el-row :gutter="10">
                                    <el-col :span="24" style="text-align: left;">
                                        <el-link v-for="link in relationList" :key="link.id" :underline="false"
                                            class="category-link" @click="handleSelect(link)">{{ link.title }}</el-link>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <!-- <el-divider />
                        <div class="card-header">
                            <span>查找纪念馆</span>
                        </div> -->
                    </el-card>
                </el-col>

                <el-col :xs="24" :sm="18">
                    <el-card shadow="never">
                        <template #header>
                            <div class="card-header">
                                <span>{{ selectName?selectName:'网上纪念馆' }}</span>
                            </div>
                        </template>
                        <el-row :gutter="15" v-if="profiles.length > 0">
                            <el-col :span="4" v-for="profile in profiles" :key="profile.name"
                                class="profile-item" @click="handleProfileClick(profile)">
                                <el-card :body-style="{ padding: '0px' }" shadow="hover">
                                    <div class="profile-avatar-placeholder">
                                        <el-image :src="profile.avatar" :fit="'scale-down'" :alt="profile.name"
                                            style="width: 100%;height: 100%;" />
                                    </div>
                                    <div style="padding: 10px; text-align: center;">
                                        <span>{{ profile.name }}</span>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                        <el-empty v-else description="暂无数据" />
                    </el-card>
                    <div class="flex justify-end mt-4">
                        <pagination v-model="pageInfo" @change="getapiMuLists" />
                    </div>
                </el-col>
            </el-row>
        </el-main>
        <Footer />
        <!-- </el-container> -->
    </div>

</template>

<script lang="ts" setup>
    import { ref, onMounted, toRaw } from 'vue';
    import { Search } from '@element-plus/icons-vue';
    import Header from '@/components/header/index.vue'
    import Footer from '@/components/footer/index.vue'
    import { apiMuLists, apiMyMuRelation } from '@/api/graveyard'
    import { useRoute, useRouter } from 'vue-router'
    import { apiBannerList } from '@/api/banner'
    const route = useRoute()
    const router = useRouter()
    const selectId = ref<string | number | null>(null);
    const selectName = ref<string | null>(null);
    const handleSelect = (item: any) => {
        console.log(item);
        selectId.value = item.id
        selectName.value = item.title
        // alert(selectId.value)
        getapiMuLists()
    };
    const searchName = ref('')
    // 分页
    const pageInfo = ref({
        page: 1,
        size: 100,
        // count: 0,
        // loading: false
    })
    // Placeholder data for profiles
    const profiles = ref([]);
    const bannerList = ref([])
    const getapiMuLists = async () => {
        let obj = {} as any
        if (selectId.value) {
            obj.relationship = selectId.value
        }
        if(searchName.value){
            obj.name = searchName.value
        }
        const data = await apiMuLists({ ...obj,...{page_no: pageInfo.value.page, page_size: pageInfo.value.size} })
        profiles.value = data.lists
    }

    const getBannerList = async () => {
        const data = await apiBannerList({type: 2})
        bannerList.value = data
    }
    const relationList = ref([])
    const getapiMyMuRelation = async () => {
        const list = await apiMyMuRelation()
        console.log(list)
        relationList.value = list
        relationList.value.unshift({id: 0,title: '全部'})
    }

    const handleProfileClick = (profile: any) => {
        console.log(profile)
        // window.open()
        const targetRouteLocationForButton = {
            name: 'muDetail',
            query: { id: profile.id },
        };
        const resolvedRouteForButton = router.resolve(targetRouteLocationForButton);
        console.log(resolvedRouteForButton)
        // 使用 window.open 打开新标签页
        window.open(resolvedRouteForButton.href, '_blank');
    }

    // 搜素
    const handleSearch = (name: string) => {
        console.log(name)
        searchName.value = name
        getapiMuLists()
    }
    onMounted(() => {
        if(route.query.name){
            console.log(route.query.name)
            searchName.value = route.query.name ? route.query.name as string : ''
        }
        if(route.query.id){
            selectId.value =  Number(route.query.id)
            selectName.value = route.query.title ? route.query.title as string : '网上纪念馆'
        }
        getapiMyMuRelation()
        getapiMuLists()
        getBannerList()
        

        
    })
</script>

<style scoped>
    /* General Page Styles */
    .page-container {
        /* max-width: 1200px;  */
        /* Adjust as needed */
        /* margin: 0 auto; */
        /* background-color: #fff;  */
        /* Main background */
        /* font-family: 'SimSun', 'Microsoft YaHei', sans-serif; Common Chinese fonts */
        /* flex-direction: column; */
    }








    /* Main Content Styles */
    .page-main {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px 0px;
        /* Reduced side padding */
    }

    .left-col-card,
    .right-col-card {
        border: 1px solid #e0e0e0;
        /* Add border similar to screenshot */
    }

    .el-card {
        border-radius: 0;
        /* Remove card rounding */
        border: 1px solid #eee;
    }

    .card-header {
        font-weight: bold;
        color: #c00;
        /* Reddish header text */
    }

    .el-card :deep(.el-card__header) {
        padding: 10px 15px;
        border-bottom: 1px solid #eee;
        background-color: #fafafa;
    }

    .el-card :deep(.el-card__body) {
        padding: 15px;
    }


    /* Left Column Styles */
    .category-section {
        font-size: 13px;
    }

    .category-group {
        margin-bottom: 15px;
    }

    .category-group strong {
        display: block;
        margin-bottom: 5px;
        /* Space between title and links */
        color: #555;
        text-align: right;
        padding-right: 5px;
    }

    .category-link {
        margin-right: 10px;
        margin-bottom: 5px;
        /* Spacing between links */
        color: #337ab7;
        /* Typical link blue */
        font-size: 12px;
        display: inline-block;
        /* Allow margin-bottom */
    }

    .category-link:hover {
        color: #d9534f;
        /* Reddish hover */
    }

    /* Right Column Styles */
    .profile-item {
        margin-bottom: 15px;
    }

    .profile-avatar-placeholder {
        width: 100%;
        height: 100px;
        /* Adjust as needed */
        background-color: #eee;
        /* Placeholder background */
        display: flex;
        align-items: center;
        justify-content: center;
        color: #aaa;
        font-size: 12px;
    }

    .profile-item .el-card {
        border: 1px solid #ddd;
    }

    .profile-item span {
        display: block;
        /* Ensure name is on its own line */
        font-size: 12px;
        color: #666;
    }

    .banner {
        margin-bottom: 40px;
        width: 100%;
        height: 100%;
    }

    .banner-item {
        width: 100%;
        max-width: 1200px;
        height: 100%;
        background-color: #d3dce6;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 24px;
    }
</style>